<template>
  <div class="map-content">
    <baidu-map
      class="bm-view"
      :center="{ lng: 110.404, lat: 43.915 }"
      :scroll-wheel-zoom="true"
      :zoom="4"
    >
      <bml-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="marker of markers"
          :key="JSON.stringify(marker)"
          :position="{ lng: marker.lng, lat: marker.lat }"
          :icon="{
            url: `http://127.0.0.1:5500/demo/data.html`,
            size: { width: 31, height: 36 }
          }"
        ></bm-marker>
      </bml-marker-clusterer>
      <bm-overlay
        pane="labelPane"
        v-for="marker of markers"
        :key="JSON.stringify(marker)"
        :lng="marker.lng"
        :lat="marker.lat"
        :class="{ sample: true }"
        @draw="draw"
      >
        <div class="marker-arrow">{{ marker.title }}</div>
      </bm-overlay>
    </baidu-map>
  </div>
</template>
<script>
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  name: "vi-map",
  components: {
    BmlMarkerClusterer
  },
  data() {
    return {
      markers: [],
      active: false
    };
  },
  created() {
    // 插入 10 个随机点
    const markers = [];
    for (let i = 0; i < 10; i++) {
      const position = {
        lng: Math.random() * 40 + 85,
        lat: Math.random() * 30 + 21,
        title: `第${i}个`
      };
      markers.push(position);
    }
    this.markers = markers;
    console.log(this.markers);
  },
  methods: {
    draw({ el, BMap, map }) {
      console.log(el.getAttribute("lng"));
      let lng = el.getAttribute("lng");
      let lat = el.getAttribute("lat");
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x + 28 + "px";
      el.style.top = pixel.y - 22 + "px";
    }
  }
};
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;

  .sample {
    position: absolute;
  }

  .marker-arrow {
    white-space: nowrap;
    background: rgba(44, 200, 138, 0.85);
    color: #fff;
    padding: 6px 20px;
    border-radius: 4px;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      border-width: 8px;
      border-style: solid;
      border-color: transparent rgba(44, 200, 138, 0.85) transparent transparent;
      top: 6px;
      left: -16px;
      overflow: hidden;
    }
  }

  .bm-view {
    width: 100%;
    height: 100%;

    /deep/ .anchorBL {
      //去除文字标识
      display: none;
    }
  }
}
</style>
